<template>
  <div class="userManagement">
    <!-- 搜索框 -->
    <a-form layout="inline" :model="queryParams" @finish="doSearch" style="margin-bottom: 16px">
      <a-form-item label="账户">
        <a-input v-model:value="queryParams.userAccount" placeholder="请输入账户" />
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model:value="queryParams.userName" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>

    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doChange"
      :rowKey="(record) => record.id"
    >
      <template #bodyCell="{ column, record }">
        <!-- 头像特殊处理 -->
        <template v-if="column.dataIndex === 'userAvatar'">
          <a-image :src="record.userAvatar" :width="50"></a-image>
        </template>
        <!-- 角色特殊处理 -->
        <template v-else-if="column.dataIndex === 'userRole'">
          <!-- 编辑模式 -->
          <template v-if="editingKey === record.id">
            <a-select
              v-model:value="record.userRole"
              style="width: 100%"
              :options="roleOptions"
            ></a-select>
          </template>
          <!-- 查看模式 -->
          <template v-else>
            <div v-if="record.userRole === 'admin'">
              <a-tag color="green"> 管理员</a-tag>
            </div>
            <div v-else-if="record.userRole === 'user'">
              <a-tag color="blue"> 用户</a-tag>
            </div>
          </template>
        </template>
        <!-- 时间特殊处理 -->
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <!-- 可编辑字段处理 -->
        <template v-else-if="isEditable(column.dataIndex)">
          <!-- 编辑模式 -->
          <template v-if="editingKey === record.id">
            <a-input
              v-model:value="record[column.dataIndex]"
              :placeholder="`请输入${column.title}`"
            />
          </template>
          <!-- 查看模式 -->
          <template v-else>
            {{ record[column.dataIndex] }}
          </template>
        </template>
        <!-- 操作列 -->
        <template v-else-if="column.key === 'action'">
          <template v-if="editingKey === record.id">
            <a-button type="link" @click="handleSave(record.id)">保存</a-button>
            <a-button type="link" @click="cancel(record.id)">取消</a-button>
          </template>
          <template v-else>
            <a-button danger @click="deleteById(record.id)">删除</a-button>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
          </template>
        </template>
        <!-- 其他非编辑字段 -->
        <template v-else>
          {{ record[column.dataIndex] }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { delUserUsingPost, getUserPageUsingPost, updUserUsingPost } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

// 定义表格数据
const dataList = ref<API.UserVO[]>([])
// 定义总条数
const total = ref(0)
// 定义查询参数,默认1页10条
const queryParams = reactive<API.UserQueryRequest>({
  current: 1,
  pageSize: 10,
  userAccount: '',
  userName: '',
})

// 编辑状态管理
const editingKey = ref('') // 当前正在编辑的行ID
const originData = ref<Record<string, API.UserVO>>({}) // 保存原始数据用于取消编辑

// 角色选项
const roleOptions = [
  { label: '管理员', value: 'admin' },
  { label: '用户', value: 'user' },
]

// 判断字段是否可编辑
const isEditable = (dataIndex: string) => {
  return ['userName', 'userAccount', 'userProfile', 'userRole'].includes(dataIndex)
}

// 定义分页对象
const pagination = computed(() => {
  return {
    current: queryParams.current,
    pageSize: queryParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total) => `共${total}条`,
  }
})

// 从后端分页查询数据
async function getPageData() {
  const resp = await getUserPageUsingPost({ ...queryParams })
  if (resp.data.code === 0 && resp.data.data) {
    dataList.value = resp.data.data.records ?? []
    total.value = resp.data.data.total ?? 0
  } else {
    message.error('查询用户数据失败,' + resp.data.message)
  }
}

// 表格分页变化
function doChange(record: any) {
  queryParams.current = record.current
  queryParams.pageSize = record.pageSize
  getPageData()
}

// 搜索
function doSearch() {
  queryParams.current = 1
  getPageData()
}

// 删除
async function deleteById(id: string) {
  const resp = await delUserUsingPost({ id })
  if (resp.data.code === 0) {
    message.success('删除成功')
    getPageData()
  } else {
    message.error('删除失败,' + resp.data.message)
  }
}

// 编辑
function edit(record: API.UserVO) {
  // 保存原始数据用于取消编辑
  originData.value[record.id] = { ...record }
  // 设置当前编辑行
  editingKey.value = record.id
}

// 取消编辑
function cancel(id: string) {
  // 恢复原始数据
  const newData = dataList.value?.map((item) => {
    if (item.id === id) {
      return originData.value[id]
    }
    return item
  })
  if (newData) {
    dataList.value = newData
  }
  // 清除编辑状态
  editingKey.value = ''
}

// 保存编辑
async function handleSave(id: string) {
  // 找到当前编辑的记录
  const currentRecord = dataList.value?.find((item) => item.id === id)
  if (!currentRecord) return

  // 调用更新API
  const resp = await updUserUsingPost(currentRecord)
  if (resp.data.code === 0) {
    message.success('更新成功')
    editingKey.value = ''
  } else {
    message.error('更新失败: ' + resp.data.message)
  }
}

// 页面加载时获取数据
onMounted(() => {
  getPageData()
})

// 表格列定义
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
  },
  {
    title: '用户名',
    dataIndex: 'userName',
  },
  {
    title: '头像',
    dataIndex: 'userAvatar',
  },
  {
    title: '简介',
    dataIndex: 'userProfile',
  },
  {
    title: '用户角色',
    dataIndex: 'userRole',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
  },
]
</script>

<style scoped>
/* 可以添加一些编辑状态的样式 */
:deep(.ant-table-cell) {
  transition: background-color 0.2s;
}

:deep(.ant-table-cell:hover) {
  background-color: #f5f5f5;
}
</style>
